<template>
  <el-form 
      label-position="top"
      :model="formData" 
      :rules="rules" 
      ref="ruleForm"
  >
      <!-- label-position="left" 
      label-width="100px" -->
      <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="补录年份">
                <el-date-picker
                    v-model="formData.year"
                    type="year"
                    :editable="false"
                    :clearable="false"
                    style="width: 100%;"
                    class="calendar-single"
                    :pickerOptions="pickerOptions"
                />
            </el-form-item>
          </el-col>
          <el-col :span="24">
              <el-form-item prop="energy">
              </el-form-item>
          </el-col>
      </el-row>
  </el-form>
</template>
<style lang="scss" scoped>
.calendar-single ::v-deep.el-icon-date:before {
  content: '' !important;
}
.calendar-single ::v-deep.el-input__suffix {
  width: 25px !important;
}
.calendar-single ::v-deep i:last-child {
  background: url('~@/assets/image/operation/calendar.svg') center center no-repeat !important;
  background-size: 18px 18px !important;
}
.calendar-single ::v-deep.el-range-separator {
  line-height: 28px !important;
}
</style>
<script>
  import dayjs from "dayjs";
  import { 
      addGateWayInfo,
      updateGateWayInfo,
  } from "@/api/gateWay";
  export default {
      name: "FormModal",
      props: {
          title: String,
          rowData: Object
      },
      data() {
          return {
              pickerOptions: {
                  disabledDate(time) {
                      return time.getTime() > new Date().getTime()    //使用这种方法实现
                  },
              },
              timeRange:[],
              formData:{
                  projectId:this.$store.state.projectId,
                  year:this.$props.rowData?.year || dayjs().format('YYYY'),
                  projectInfos:this.$props.rowData?.projectInfos || [],
              },
              rules:{
                  year: [
                      { required: true, message: "请选择补录月份", trigger: "change" }
                  ],
              }
          }
      },
      created(){
          this.initSetModal()
      },
      methods:{
          initSetModal() {
              if (this.$props.rowData) {
                  this.$emit("SetTitle", "编辑");
              } else {
                  this.$emit("SetTitle", "新增");
              }
              this.$emit("SetPageWidth", 1250);
              this.$emit("SetPageActions", [
                  {
                      text: "取消",
                      theme: "info",
                      handle: () => {
                          this.$emit("Close");
                      }
                  },
                  {
                      text: "保存",
                      theme: "primary",
                      handle: () => {
                          this.submitForm();
                      },
                      loading: false
                  }
              ]);
          },
          submitForm() {
              this.$refs.ruleForm.validate(valid => {
                  if (valid) {
                  //验证成功,发送请求
                  if (this.$props.rowData) {
                      //编辑更新
                      this.sendUpdateRequestFun();
                  } else {
                      //新增
                      this.sendAddRequestFun();
                  }
                  } else {
                  //验证失败
                  }
              });
          },
          sendAddRequestFun() {
                  addGateWayInfo({
                  ...this.formData
              }).then(result => {
                  if (result.code == 200) {
                      this.$message.success(result.msg);
                      this.$emit("Close", true);
                  }
              }).catch((err) => {
                  this.$message.error(err)
              })
          },
          sendUpdateRequestFun() {
              const params={
                  ...this.formData,
                  id: this.$props.rowData?.id
              }
                  updateGateWayInfo(params).then(result => {
                  if (result.code == 200) {
                      this.$message.success(result.msg);
                      this.$emit("Close", true);
                  }
              }).catch((err) => {
                  this.$message.error(err)
              })
          },
      }
  }
</script>
